<div class="m-page-title">
	<h2 class="u-tt u-tt-lg">表格元素</h2>
</div>
<div class="m-callout m-callout-warning">
	<div class="m-callout-title">基础表格样式</div>
	<p>
	用于含有表格数据页面的html元素</p>
</div>
<div class="u-text">tab菜单含标题与筛选</div>
<div class="m-highlight">
	<pre class="prettyprint">&lt;div class=&quot;m-tab s-tab&quot;&gt;<br />	&lt;h2 class=&quot;u-tt&quot;&gt;列表页&lt;/h2&gt;<br />	&lt;div class=&quot;filter&quot;&gt;<br />		&lt;form method=&quot;post&quot; action=&quot;&quot;&gt;<br />			&lt;select class=&quot;u-slt&quot;&gt;<br />				&lt;option&gt;==分类==&lt;/option&gt;<br />			&lt;/select&gt;<br />			关键词：<br />			&lt;input name=&quot;keyword&quot; type=&quot;text&quot; class=&quot;u-ipt u-ipt-2&quot; id=&quot;keyword&quot;/&gt;<br />			&lt;button class=&quot;u-btn&quot; type=&quot;submit&quot;&gt;搜索&lt;/button&gt;<br />		&lt;/form&gt;<br />	&lt;/div&gt;<br />	&lt;ul&gt;<br />		&lt;li class=&quot;z-crt&quot;&gt;&lt;a href=&quot;#&quot;&gt;内容列表&lt;/a&gt;&lt;/li&gt;<br />		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;添加内容&lt;/a&gt;&lt;/li&gt;<br />	&lt;/ul&gt;<br />&lt;/div&gt;</pre>
</div>
<div class="u-text">基础样式代码</div>
<div class="m-highlight">
	<pre class="prettyprint">&lt;form method=&quot;post&quot; action=&quot; &quot; onkeypress=&quot;if(event.keyCode==13||event.which==13){return false;}&quot;&gt;<br />	&lt;table class=&quot;m-table m-table-row&quot; id=&quot;table&quot;&gt;
		//表格内容<br />	&lt;/table&gt;<br />	&lt;div class=&quot;m-table-tool&quot;&gt;
		//表格工具<br />	&lt;/div&gt;<br />&lt;/form&gt;<br />底部可以直接放置表格自动处理js，具体查看js说明</pre>
</div>
<div class="u-text">表格内容样式</div>
<div class="m-highlight">
	<pre class="prettyprint">&lt;thead class=&quot;m-table-thead s-table-thead&quot;&gt;<br />	&lt;tr&gt;<br />		&lt;th class=&quot;cola&quot;&gt;id&lt;/th&gt;<br />		&lt;th&gt;标题&lt;/th&gt;<br />		&lt;th class=&quot;colc&quot;&gt;时间&lt;/th&gt;<br />		&lt;th class=&quot;colb&quot;&gt;操作&lt;/th&gt;<br />	&lt;/tr&gt;<br />&lt;/thead&gt;
&lt;tbody&gt;<br />	&lt;tr&gt;<br />		&lt;td&gt;&lt;input name=&quot;id[]&quot; type=&quot;checkbox&quot; value=&quot;&quot; /&gt; 1&lt;/td&gt;<br />		&lt;td&gt;&lt;span class=&quot;u-edit&quot; url=&quot;post地址&quot; width=&quot;200&quot;&gt;这是一条内容演示数据，点击可以编辑&lt;/span&gt;&lt;/td&gt;<br />		&lt;td&gt;2013-10-06 14:41&lt;/td&gt;<br />		&lt;td&gt;&lt;a href=&quot;#&quot;&gt;编辑&lt;/a&gt; / &lt;a href=&quot;#&quot; class=&quot;u-del&quot;&gt;删除&lt;/a&gt;&lt;/td&gt;<br />	&lt;/tr&gt;<br />&lt;/tbody&gt;<br />如果使用js自动处理可以使用u-del来绑定删除u-edit来绑定自动编辑<br />表格头部分为cola至cold来表示不同行宽度<br /></pre>
</div>
<div class="u-text">分页样式</div>
<div class="m-highlight">
	<pre class="prettyprint">&lt;div class=&quot;m-page&quot;&gt; 分页php代码 &lt;/div&gt;<br />分页内部会自动调用处理，当前代码建议放入表格工具内</pre>
</div>
<div class="u-text">表格操作</div>
<div class="m-highlight">
	<pre class="prettyprint">&lt;div class=&quot;operating&quot;&gt;<br />	&lt;label class=&quot;u-opt&quot;&gt;<br />		&lt;input id=&quot;selectAll&quot; type=&quot;checkbox&quot;  /&gt;<br />		全选&lt;/label&gt;<br />	&lt;select class=&quot;u-slt&quot; name=&quot;type&quot;&gt;<br />		&lt;option&gt;==操作==&lt;/option&gt;<br />		&lt;option&gt;删除&lt;/option&gt;<br />		&lt;option&gt;未通过&lt;/option&gt;<br />		&lt;option&gt;审核&lt;/option&gt;<br />	&lt;/select&gt;<br />	&lt;button type=&quot;submit&quot; class=&quot;u-btn&quot; &gt;确认&lt;/button&gt;<br />&lt;/div&gt;<br />当前代码建议放入表格工具内</pre></div>

<script>
Do.ready('prettify',function() {
	prettyPrint();
});
</script>